<div class="wrap">Hello,world!</div>
<style>
    @keyframes move {
        0% {
            background-position: 0 0;
        }

        100% {
            /*宽度固定，如果为百分比背景不会滚动*/
            background-position: -300px 0;
        }
    }

    .wrap {
        /*设置背景渐变色*/
        background-image: linear-gradient(to right, rgb(108, 124, 196), rgb(68, 170, 218), rgb(155, 208, 240), rgb(188, 209, 228), rgb(32, 139, 89), rgb(67, 165, 119), rgb(82, 192, 141), rgb(22, 216, 96), rgb(121, 241, 151), rgb(132, 221, 132), rgb(209, 209, 68), orange, red);
        /*chrome私有样式，加前缀，文字显示背景图片*/
        -webkit-background-clip: text;
        animation: move 5s infinite;
        /*文字颜色设为透明*/
        color: transparent;
        /*宽度固定*/
        width: 300px;
    }
</style>